<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-1.12.4.js"></script>
    <script src="./js/layer/layer.js"></script>
    <link rel="stylesheet" href="./css/base.css">
    <style>
        form {
            margin-top: 30px;
            width: 500px;
            height: 280px;
            border-right: 1px dotted #ccc;
            text-align: center;
            padding: 10px;
        }

        form p {
            margin-top: 20px;
        }

        img {
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div style="width: 1000px;margin:20px auto;">
        <img src="./images/log6.png" alt="" style="width: 400px;">
        <span><a href="./main"
                style="margin-left: 450px;font-size: 12px;color: #ccc;text-decoration: none;">返回首页</a></span>
    </div>

    <div style="margin: 20px auto;width: 800px;height: 400px;border: 1px solid #ccc;">
        <span
            style="width: 800px;height:30px;line-height:30px;font-weight:600;color: #ccc;border-bottom:1px solid #ccc;display: block;text-indent: 10px;">名鞋库用户注册</span>
        <div>
            <form style="float:left;">
                <p>
                    &nbsp;&nbsp;&nbsp;用户名: <input name="username">
                </p>
                <p>
                    &nbsp;&nbsp;&nbsp;密&nbsp;&nbsp;&nbsp;码: <input name="password" type="password">
                </p>
                <p>
                    确认密码: <input name="password1" type="password">
                </p>
                <p>
                    &nbsp;&nbsp;&nbsp;验证码: <input type="text" style="width: 50px;">
                    <span
                        style="line-height:20px;display:inline-block;width:50px;height:20px;background-color:#ccc">8538</span>
                    <a href="" style="color:#ccc;text-decoration: none;font-size: 12px;">换个图片</a>
                </p>
                <p>
                    <input type="checkbox">
                    <span style="font-size: 12px;">我已阅读并同意</span><a href=""
                        style="font-size: 12px;color: blue;">名鞋库会员注册协议</a>.
                </p>
                <p>
                    <button
                        style="background-color: orange;border:none;color:white;width:80px;height:30px;padding: 5px;">注册新用户</button>
                </p>
            </form>
            <div style="float:left;width:250px;margin-top: 50px;text-align: center;">
                <span style="font-size:12px;margin-top: 40px;display: block;">已经有名鞋库账号?</span>
                <br>
                <button
                    style="padding:5px 10px;color: red;background-color:pink;border:1px solid orange;margin-bottom: 40px;"><a
                        href="./login" style="color: red;text-decoration:none">现在登录</a></button>
                <br>
                <span style="color: orange;">会员全场满399即可免邮!</span>
                <br>
                <span style="font-size: 12px;">(货到付款及赠品除外)</span>
            </div>
        </div>
    </div>
    <img src="./images/log3.png" alt="" style="width:1000px;margin: 10px auto;display: block;">
    <script>
        $(function () {
            $("form").on("submit", function () {
                // console.log($("form").serialize());
                $.ajax({
                    url: "/api/register",
                    type: "post",
                    data: $("form").serialize(),
                    beforeSend() {
                        index = layer.msg("注册中...")
                    }
                }).then(function (res) {
                    layer.close(index);
                    let { code, msg } = res;
                    layer.msg(msg);
                    if (code == 1) {
                        setTimeout(() => {
                            location = "/login";
                        }, 1000)
                    }
                });
                return false;
            });
        })
    </script>
</body>

</html>